<template lang="html">
  <div>
    <scroller style="top:44px;" ref="my_scroller" height="94%"  v-if="contracts.length !== 0">
      <card class="contract-box" v-for="contract in contracts" :key="contract.id">
        <p slot="header" class="contract-title">
          需签合同
        </p>
        <div slot="content" class="contract-content">
          <a v-bind:href="contract.viewpdfUrl">
            <p><span class="contract-detail">合同编号</span><span class="contract-id">{{contract.contractId}}</span></p>
            <p><span class="contract-detail">合同名称</span><span class="contract-id">{{contract.docTitle}}</span></p>
          </a>
        </div>
      </card>
    </scroller>
    <divider v-else>暂时没有合同</divider>
  </div>
</template>

<script>
import { Card, Divider } from 'vux'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      contracts: []
    }
  },
  created () {
    this.setSelectFooter(false)
    this.setShowBack(true)
    this.getSigned()
    this.setBackground(false)
  },
  methods: {
    getSigned () {
      this.$store.dispatch('getSigned').then(res => {
        let result = res.data
        if (result.Code === 511) {
          this.contracts = result.Contracts
        } else if (result.Code === 405 || result.Code === 403) {
          this.setToast({
            show: true,
            type: '',
            text: result.Message
          })
          this.setLogin(true)
        } else {
          this.setToast({
            show: true,
            type: '',
            text: result.Message
          })
        }
      })
    },
    ...mapMutations({
      setSelectFooter: 'setSelectFooter',
      setShowBack: 'setShowBack',
      setLogin: 'setPopup',
      setToast: 'setShowToast',
      setBackground: 'setBackground'
    })
  },
  components: {
    Card,
    Divider
  }
}
</script>

<style lang="css">
</style>
